<template>
  <div class="rank">
    <div class="list" v-for="item in topList" :key="item.title">
      <h3>{{item.title}}</h3>
      <div
        class="rank-list"
        v-for="itemList in item.list"
        :key="itemList.topId"
        @click="selectRankList(itemList)"
      >
        <div class="item">
          <h4>{{itemList.label}}</h4>
          <ul>
            <li v-for="(musicItem,i) in itemList.song" :key="musicItem.songId">
              <span>{{i+1}}.{{musicItem.title}}-{{musicItem.singerName}}</span>
            </li>
          </ul>
        </div>
        <div class="item">
          <img :src="itemList.picUrl" alt />
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import axios from "axios";
export default {
  data() {
    return {
      topList: [],
    };
  },
  created() {
    this.getTopList();
  },
  methods: {
    getTopList() {
      axios
        .get("/jsososo/top/category", {
          params: {
            showDetail: 1,
          },
        })
        .then((res) => {
          console.log(res.data.data);
          this.topList = res.data.data;
        })
        .catch((err) => {
          console.error(err);
        });
    },
    selectRankList(item) {
      const id = item.topId;
      this.$router.push({ path: `/ranklistdetail/${id}` });
    },
  },
};
</script>
<style scoped>
.rank-list {
  display: flex;
}
.item {
  width: 50%;
}
.item > img {
  width: 100%;
}
</style>